<!DOCTYPE html>
<html ng-app='myfirstapp'>

	<head>
		<meta charset="UTF-8">
		<title>会员注册</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/nava.css"/>
		<link rel="stylesheet" type="text/css" href="../css/foot.css" />
		<link rel="stylesheet" type="text/css" href="../css/t-login.css" />
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/angular-route.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
	</head>

	<body>
		<div ng-include="'nava.html'"></div>
		<!--头-->
		<div class="logo-out">
			<div>
				<img src="../img/t-logo.png" />
				<p>会员注册</p>
			</div>
		</div>
		<!--背景登录-->
		<div class="bg-content">
			<div class="login-div clearfix">
				<!--免费注册-->
				<div class="border-out">
					<div>
						<p>礼拜五会员</p>
						<p>免费注册</p>
					</div>
				</div>
				<div class="bg-right">
					<input class="t-cl" type="text" id="phonetext" placeholder="请输入手机号" />
					<input class="t-cl" type="password" id="pastext" placeholder="请输入密码(6-20位号码字符)" />
					<input class="t-cl" type="password" id="pastext1" placeholder="请再次输入密码确认" />
					<div class="yanzheng"><input type="text" class="inputnum" placeholder="验证码" />
						<p class="yanimg"></p><span class="spanbtn">看不清换一张</span></div>
					<input class="t-cl get_num" type="text" placeholder="手机验证码" />
					<div class="t-btn clearfix">
						<div class="t-btl"><img class="t-img1" src="../img/t-sure.png" alt="" /></div><span>我已阅读并同意，《礼拜五用户协议》</span>
					</div>
					<div class="lr-div clearfix">
						<span class="loginbtn1">注册</span>
						<span class="loginbtn2">登录</span>
					</div>
					<div class="t-wrong">
						<img src="../img/t-wrong-phone.png" />
						<span class="spanwrong">手机号码不正确，请重新输入</span>
					</div>
					<img class="checkImg" src="../img/t-phone-true.png" />
					<div class="getNum">获取验证码</div>
				</div>
			</div>
		</div>
		<div ng-include="'foot.html'"></div>
	</body>
	<script type="text/javascript">
		var app = angular.module('myfirstapp', ['ngRoute']);
		var bubu = false;
		app.controller('navctrl',function($scope){
			$('.pleaselogin').html(localStorage.getItem("name"));
			//我的订单
			$('.ding1').click(function(){
				if (bubu) {
					window.location='personalcenter.html#/buy';
				}else{
					window.location='t-loadimg.html';
				};
				
			});
			//我的消息
			$('.ding2').click(function(){
				if (bubu) {
					window.location='personalcenter.html#/msg';
				}else{
					window.location='t-loadimg.html';
				};
				
			});	
			//我的商家
			$('.ding3').click(function(){
				if (bubu) {
					window.location='personalcenter.html#/store';
				}else{
					window.location='t-loadimg.html';
				};
				
			});
			
			$('.t-tui').click(function(){
				if (bubu){
					$('.pleaselogin').html('');
					$(this).html('请登录');
					bubu = false;
				}else{	
					window.location='t-loadimg.html';
					localStorage.clear()
					$(this).html('退出');
					bubu = true;
				}	
			})
		})


		
		var blu = false;
		$('.t-btl').click(function() {
			if(blu) {
				$(this).css({
					border: '1px solid #999'
				})
				$('.t-img1').css({
					display: 'none'
				})
				blu = false;
			} else {

				$(this).css({
					border: '1px solid #498e3d'
				})
				$('.t-img1').css({
					display: 'block'
				})
				blu = true;
			}

		})

		var yanimg = document.getElementsByClassName('yanimg')
		var arr = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
			'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
			'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
		var arr1 = []
		var donum;
		var deg;

		var arr2 = [];
		var a = '';
		var b = '';

		var phone = document.getElementById('phonetext');
		//手机验证码
		$('.getNum').click(function() {
			for(var i = 0; i < 6; i++) {
				b += Math.floor(Math.random() * 9)
				if(/^1[34578]\d{9}$/.test($('#phonetext').val())) {
					$('.get_num').val(b)
				} else(
					$('.t-wrong').css({
						display: 'block'
					})
				)

			}
			b = ''
		})
		for(var i = 0; i < 4; i++) {
			deg = Math.floor(Math.random() * 100 - 40);
			donum = Math.floor(Math.random() * 62);
			arr1.push(arr[donum])
			yanimg[0].innerHTML += "<span>" + arr1[i] + "</span>"
			$('.yanimg span').eq(i).css({
				transform: 'rotateZ(' + deg + 'deg)'
			})
			a += arr1[i]

		}
		arr1 = [];
		$('.spanbtn').click(function() {
			a = '';
			$('.yanimg').children('span').remove()
			for(var i = 0; i < 4; i++) {
				deg = Math.floor(Math.random() * 100 - 40);
				donum = Math.floor(Math.random() * 62);
				arr1.push(arr[donum])
				yanimg[0].innerHTML += "<span>" + arr1[i] + "</span>";
				$('.yanimg span').eq(i).css({
					transform: 'rotateZ(' + deg + 'deg)'
				})
				a += arr1[i]
			}
			console.log(a)
			arr1 = [];
		})

		phone.oninput = function() {
			$('.t-wrong').css({
				display: 'none'
			})
			if(/^1[34578]\d{9}$/.test($('#phonetext').val())) {
				$('.checkImg').css({
					display: 'block'
				})
			} else {
				$('.checkImg').css({
					display: 'none'
				})
			}
		}

		$('.loginbtn1').click(function() {
			if(blu) {
				if(!(/^1[34578]\d{9}$/.test($('#phonetext').val()))) {
					$('.t-wrong').css({
						display: 'block'
					})
					return false;

				} else if($('#pastext').val() == '' || $('#pastext1').val() == '') {
					alert('密码或确认密码不能为空!');
					return false;
				} else if($('#pastext').val() != $('#pastext1').val()) {
					alert('两次输入的密码不同');
					return false;
				} else if(!(/^[\w.]{6,20}$/.test($('#pastext').val()))) {
					alert('密码必须是6~20位字符');
					return false;
				} else if($('.inputnum').val() != a) {
					alert('验证码输入错误');
					return false;
				} else if($('.get_num').val() == '') {
					alert('手机验证码错误');
					return false;
				} else {

					//更改数据
					var obj = {};
					obj.phone = $('#phonetext').val();
					obj.pas = $('#pastext').val();
					$.post('../php/data1.php', obj, function(data) {
						alert(data)
					})
					$('#phonetext').val('');
					$('#pastext').val('');
					$('#pastext1').val('');
					$('.inputnum').val('');
					$('.get_num').val('');
					$('.checkImg').css({
						display: 'none'
					})
				}
			} else {
				if(!(/^1[34578]\d{9}$/.test($('#phonetext').val()))) {
					$('.t-wrong').css({
						display: 'block'
					})
					return false;

				} else if($('#pastext').val() == '' || $('#pastext1').val() == '') {
					alert('密码或确认密码不能为空!');
					return false;
				} else if($('#pastext').val() != $('#pastext1').val()) {
					alert('两次输入的密码不同');
					return false;
				} else if(!(/^[\w.]{6,20}$/.test($('#pastext').val()))) {
					alert('密码必须是6~20位字符');
					return false;
				} else if($('.inputnum').val() != a) {
					alert('验证码输入错误');
					return false;
				} else if($('.get_num').val() == '') {
					alert('手机验证码错误');
					return false;
				} else {
					alert('请先阅读并同意《礼拜五用户协议》')
				}
			}
		})

		$('.loginbtn2').click(function() {
			window.location.href = 't-loadimg.html'
		})
		$('.logo-out div img').click(function(){
			window.location.href='index.html';
		})
	</script>

</html>